<template>
  <div class="center-map">
    <simple-chart ref="chart" v-if="options" :options="options" @click="onMapClick"/>
  </div>
</template>

<script>
import qianjiang from '@/data/test.json'
import simpleChart from '@/components/job/simple-chart'
import {replaceAll} from '@/utils'

const echarts = require('echarts')
echarts.registerMap('qianjiang', qianjiang)

const getOption = () => {
  const name = 'qianjiang'
  const _zoom = 0.82
  const aspectScale = 1
  return {
    tooltip: {
      show: true, // 是否显示提示框组件
      trigger: 'item', // item.数据项图形触发(主要在散点图) axis.坐标轴触发(主要在柱状图) none.什么都不触发
      padding: 0,
      backgroundColor: 'transparent',
      formatter: (p) => {
        const d = p.data
        if(!d) {
          return p.name
        }
        return `
          <div class="chart-tip">
            <div class="chart-tip-title">${d.地区}</div>
            <div class="chart-tip-line">
                <span>法人单位：</span>
                <span>${d.法人单位数}个</span>
                <span>${d.per1}</span>
            </div>
            <div class="chart-tip-line">
                <span>产业活动单位：</span>
                <span>${d.产业活动单位数}个</span>
                <span>${d.per2}</span>
            </div>
         </div>
        `
      }
    },
    geo: [
      {
        map: name,
        roam: false,
        silent: true,
        layoutCenter: ['50%', '45%'],
        layoutSize: '100%',
        zoom: _zoom,
        aspectScale: aspectScale,
        label: {
          normal: {
            fontSize: 14,
            show: false,
            color: '#fff'
          },
          emphasis: {
            show: false,
            color: '#fff'
          }
        },
        itemStyle: {
          normal: {
            borderColor: '#c0f3fb',
            borderWidth: 1,
            shadowColor: '#8cd3ef',
            shadowOffsetY: 10,
            shadowBlur: 120,
            areaColor: 'transparent'
          }
        }
      },
      {
        type: 'map',
        map: name,
        zoom: _zoom,
        roam: false,
        silent: true,
        zlevel: 1,
        layoutCenter: ['50%', '46%'],
        layoutSize: '100%',
        aspectScale: aspectScale,
        label: {
          normal: {
            show: false
          }
        },
        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: 'rgba(58,149,253,0.8)',
            shadowColor: 'rgba(172, 122, 255,0.5)',
            shadowOffsetY: 5,
            shadowBlur: 15,
            areaColor: 'rgba(5,21,35,0.1)'
          }
        }
      },
      {
        map: name,
        roam: false,
        zoom: _zoom,
        zlevel: -2,
        silent: true,
        layoutCenter: ['50%', '47%'],
        layoutSize: '100%',
        aspectScale: aspectScale,
        label: {
          normal: {
            show: false
          }
        },
        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: 'rgba(58,149,253,0.6)',
            shadowColor: 'rgba(65, 214, 255,1)',
            shadowOffsetY: 5,
            shadowBlur: 15,
            areaColor: 'transpercent'
          }
        }
      },
      {
        map: name,
        roam: false,
        zlevel: -3,
        silent: true,
        layoutCenter: ['50%', '48%'],
        layoutSize: '100%',
        zoom: _zoom,
        aspectScale: aspectScale,
        label: {
          normal: {
            show: false
          }
        },
        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: 'rgba(58,149,253,0.4)',
            shadowColor: 'rgba(58,149,253,1)',
            shadowOffsetY: 15,
            shadowBlur: 30,
            areaColor: 'transpercent'
          }
        }
      },
      {
        map: name,
        roam: false,
        zlevel: -4,
        silent: true,
        layoutCenter: ['50%', '49%'],
        layoutSize: '100%',
        zoom: _zoom,
        aspectScale: aspectScale,
        label: {
          normal: {
            show: false
          }
        },
        itemStyle: {
          normal: {
            borderWidth: 5,
            borderColor: 'rgba(5,9,57,0.8)',
            shadowColor: 'rgba(29, 111, 165,0.8)',
            shadowOffsetY: 15,
            shadowBlur: 10,
            areaColor: 'rgba(5,21,35,0.1)'
          }
        }
      }
    ],
    series: [
      {
        mapType: name,
        type: 'map',
        zoom: _zoom,
        zlevel: 2,
        layoutCenter: ['50%', '45%'],
        layoutSize: '100%',
        showLegendSymbol: true,
        aspectScale: aspectScale,
        label: {
          show: false,
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        itemStyle: {
          areaColor: {
            type: 'linear',
            x: 1200,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [{
              offset: 0,
              color: 'rgba(3,27,78,1)' // 0% 处的颜色
            }, {
              offset: 1,
              color: 'rgba(58,149,253,1)' // 50% 处的颜色
            }],
            global: true // 缺省为 false
          },
          borderColor: '#fff',
          borderWidth: 0.2
        },
        emphasis: {
          label: {
            show: true,
            textStyle: {
              color: '#fff',
              fontSize: 14
            }
          },
          itemStyle: {
            show: true,
            color: '#fff',
            areaColor: 'rgba(124, 200, 250, 1)'
          }
        },
        select: {
          label: {
            show: true,
            color: '#fff',
            fontSize: 14
          },
          itemStyle: {
            show: true,
            color: '#fff',
            areaColor: 'rgba(124, 200, 250, 1)'
          }
        }
      }
    ]
  }
}

export default {
  name: 'center-map',
  cnName: '地图',
  components: {
    simpleChart
  },
  props: {
    data: Array
  },
  data() {
    return {
      options: null,
      list: []
    }
  },
  methods: {
    init() {
      const options = getOption()

      const list = this.data

      // const list = [
      //   {地区: '园林办事处', 法人单位数: 10, 产业活动单位数: 10},
      //   {地区: '杨市办事处', 法人单位数: 10, 产业活动单位数: 10},
      //   {地区: '周矶办事处', 法人单位数: 10, 产业活动单位数: 10},
      //   {地区: '广华办事处', 法人单位数: 10, 产业活动单位数: 10},
      //   {地区: '泰丰办事处', 法人单位数: 10, 产业活动单位数: 10},
      //   {地区: '高场办事处', 法人单位数: 10, 产业活动单位数: 10},
      //   {地区: '竹根滩镇', 法人单位数: 10, 产业活动单位数: 10},
      //   {地区: '渔洋镇', 法人单位数: 10, 产业活动单位数: 10},
      //   {地区: '王场镇', 法人单位数: 10, 产业活动单位数: 10},
      //   {地区: '高石碑镇', 法人单位数: 10, 产业活动单位数: 10},
      //   {地区: '熊口镇', 法人单位数: 10, 产业活动单位数: 10},
      //   {地区: '老新镇', 法人单位数: 10, 产业活动单位数: 10},
      //   {地区: '浩口镇', 法人单位数: 10, 产业活动单位数: 10},
      //   {地区: '积玉口镇', 法人单位数: 10, 产业活动单位数: 10},
      //   {地区: '张金镇', 法人单位数: 10, 产业活动单位数: 10},
      //   {地区: '龙湾镇', 法人单位数: 10, 产业活动单位数: 10},
      //   {地区: '江汉石油管理局', 法人单位数: 10, 产业活动单位数: 10},
      //   {地区: '潜江经济开发区', 法人单位数: 10, 产业活动单位数: 10},
      //   {地区: '周矶管理区', 法人单位数: 10, 产业活动单位数: 10},
      //   {地区: '后湖管理区', 法人单位数: 10, 产业活动单位数: 10},
      //   {地区: '熊口管理区', 法人单位数: 10, 产业活动单位数: 10},
      //   {地区: '总口管理区', 法人单位数: 10, 产业活动单位数: 10},
      //   {地区: '白鹭湖管理区', 法人单位数: 10, 产业活动单位数: 10},
      //   {地区: '运粮湖管理区', 法人单位数: 10, 产业活动单位数: 10},
      //   {地区: '浩口原种场', 法人单位数: 10, 产业活动单位数: 10}
      // ]
      let total1 = 0
      let total2 = 0
      list.forEach(o => {
        total1 += Number(o.法人单位数)
        total2 += Number(o.产业活动单位数)
      })

      const data = list.map(o => {
        let name = o.地区
        if(name.indexOf('办事处') !== -1) {
          name = replaceAll(name, '办事处', '街道')
        }
        let per1 = Number(o.法人单位数) / total1 * 100
        let per2 = Number(o.产业活动单位数) / total2 * 100

        if(!Number.isInteger(per1)) {
          per1 = parseFloat(per1)
          per1 = per1.toFixed(2)
        }
        if(!Number.isInteger(per2)) {
          per2 = parseFloat(per2)
          per2 = per2.toFixed(2)
        }
        per1 += '%'
        per2 += '%'
        return {name: name, ...o, per1, per2}
      })
      this.list = data
      options.series[0].data = data
      this.options = options

      this.$nextTick(_ => {
        setTimeout(_ => {
          this.initTimer()
        }, 500)
      })
    },
    onMapClick(e) {
      console.info(e)
    },
    initTimer() {
      if(this.timer) {
        clearInterval(this.timer)
      }

      let count = 0
      const len = this.list.length
      const fn = () => {
        if(count >= len) {
          count = 0
        }
        const find = this.list[count]
        this.setHighlight(find.name)
        count++
      }

      this.timer = setInterval(fn, 7000)
      fn()

    },
    setHighlight(name) {
      if(!this.$refs.chart) return
      this.$refs.chart.chart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0
      })
      this.$refs.chart.chart.dispatchAction({
        type: 'select',
        seriesIndex: 0,
        name: name
      })
      this.$refs.chart.chart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        name: name
      })
    }
  },
  beforeDestroy() {
    if(this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.center-map {
  height: 78%;
  padding-bottom: 20px;

}
</style>
<style lang="scss">
.chart-tip {
  background-color: rgba(7, 70, 139, .6);
  font-size: 12px;
  color: #FFF;
  padding: 10px;
  border: 1px solid #08f0ff;
  border-radius: 4px;
  box-shadow: inset rgba(83,224,231, .3) 0 0 10px 5px;

  &-title {
    font-size: 14px;
  }

  &-line {

  }
}
</style>
